<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
        <el-checkbox-group v-model="checkedColumns" size="mini">
          <el-checkbox style="display: block;" v-for="(item,index) in columns" :key="item.label" :label="item.label"
                       @change="chickBoxGroupChange(item)"
          >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
        <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
      </el-popover>
    </el-row>

    <common-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                  :columns="columns" :operates="operates">
    </common-table>
<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"-->
<!--                @pagination="getList"/>-->
  </div>
</template>

<script>
import { getDetailColumns, bomListData, getColumns } from '@/api/pms/material'
import CommonTable from '@/views/components/dynamicTable'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Bom",
  components: { Treeselect,CommonTable },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表格树数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      listQuery: {
        partId: undefined
      },
      columns: [],// 需要展示的列
      checkedColumns: [],
      // 按钮
      operates: {// 列操作按钮
        width: 150,
        list: []
      }
    };
  },
  created() {
    this.getColumn();
    this.listQuery.partId = this.$route.params && this.$route.params.partId;
    this.getList();
  },
  methods: {
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
    handleSelectionChange(val) {

    },
    getColumn() {
      this.loading = true
      getDetailColumns().then(response => {
        this.columns = response.data;
        this.columns.forEach((item, index) => {
          this.checkedColumns.push(item.label)
        });
        this.loading = false
      })
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      bomListData(this.listQuery).then(response => {
        this.list = this.handleTree(response.data, "id");
        this.loading = false;
      });
    }
  }
};
</script>
